import React from 'react';
import ReactEcharts from '@/components/Echarts';
// import { history } from 'umi'

const PortrayalPie = ({ data }) => {
    let pieData = [];
    if (data.length > 0) {
        pieData = data.map(item => {
            const newItem = { ...item, name: item.postTypeName };
            return newItem;
        });
    }
    const finalLegend = pieData.map(item => item.name);
    const finalData = pieData.map(item => ({ value: item.workNnum, name: item.name }));
    const total = pieData.reduce((prev, curr) => {
        let newPrev = prev;
        newPrev += curr.workNnum;
        return newPrev;
    }, 0);
    const mapTitleToValue = pieData.reduce((prev, curr) => {
        const newPrev = prev;
        newPrev[curr.name] = curr.workNnum;
        return newPrev;
    }, {});
    const getLegendFormatter = name => {
        const percentData = mapTitleToValue[name];
        let percent = 0;
        if ((percentData * 100) % total === 0) {
            percent = (percentData * 100) / total;
        } else {
            percent = ((percentData * 100) / total).toFixed(1);
        }
        return `${name} | ${mapTitleToValue[name]}人/ ${percent}%`;
    };
    return (
        <ReactEcharts
            option={{
                // color: [
                //     '#FFA808',
                //     '#5B8FF9',
                //     '#5AD8A6',
                //     '#FF99C3',
                //     '#E8684A',
                //     '#9270CA',
                //     '#5D7092',
                //     '#6DC8EC',
                //     '#FFA808'
                // ],
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}人/({d}%)',
                    confine: true
                },
                legend: {
                    data: finalLegend,
                    formatter: name => getLegendFormatter(name),
                    orient: 'vertical',
                    bottom: finalLegend.length < 3 ? 20 : 0,
                    height: 60,
                    textStyle: { fontSize: 12, color: '#999' },
                    selectorLabel: {
                        show: false
                    }
                },
                series: [
                    {
                        name: '职位类型占比',
                        type: 'pie',
                        radius: [0, '60%'],
                        center: ['50%', '40%'],
                        label: 'none',
                        // label: {
                        //     formatter: '{b}: {c} 人，{d}%'
                        // },
                        itemStyle: {
                            normal: {
                                borderWidth: 0,
                                borderColor: '#ffffff'
                            },
                            emphasis: {
                                borderWidth: 0,
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        },
                        data: finalData
                    }
                ]
            }}
        />
    );
};

export default PortrayalPie;
